<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/paint-friend.css">
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/iconfont.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <script src="js/paint-friend.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/iconfont.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style type="text/css">
        body {
            background: #f6f9fa;
        }

        .nav > li > a {
            padding: 4px 5px;
        }

        header {
            background: white;
            height: 50px;
        }

        #ul {
            margin-top: 13px;
        }

        #ul > li > a {
            color: black;
            font-size: 10px;
        }

        .span {
            margin: -8px;
            background: white;
            margin-top: -4px;
        }

        #span {
            color: #5BC0DE;
        }

        .nav > li > a:hover {
            background: white;
        }

        #sc {
            width: 200%;
            background: #f4f4f4;
        }

        #button {
            margin-left: 147px;

        }

        #button > span {
            color: #999;
        }

        #login {
            margin-top: 6px;
        }

        #img {
            margin-top: 9px;
        }

        #li {
            width: 68px;
            height: 57px;
            margin-top: -16px;
            margin-left: 13px;
            background: #f45a8d;
            border-radius: 5px;
        }

        #a {
            text-align: center;
            margin-top: 17px;
            background: #f45a8d;
        }

        #title {
            width: 980px;
            height: 28px;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
            margin-top: 28px;
            text-align: center;
        }

        #tit {
            height: 56px;
            line-height: 56px;
            margin: 0 auto;
            padding: 0 20px;
            font-size: 40px;
            background: #fff;
            text-align: center;
        }

        #message {
            font-size: 1.2rem;
            color: #B54735;
            text-align: center;
        }

        #imgage {
            position: absolute;
            margin-left: 69px;
            margin-top: 6px;
            width: 404px;
            height: 275px;

        }

        #imgage:hover {
            background-image: url(img/微信图片_20191216151104.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 120% 80%;
            position: absolute;

        }

        #line {
            float: left;
            border-right: 1px solid #ddd;
            height: 300px;
            margin-top: 62px;
            margin-left: 93px;
        }

        #div {
            float: right;
            margin-top: 62px;
            margin-right: -46px;
        }

        .sc2 {
            width: 388px;
            border: 1px solid #ddd;
            color: #aaa;
            font-size: 14px;
            padding: 10px;
            height: 45px;
            vertical-align: middle;
            border-radius: 4px;
        }

        #size {
            color: #aaa;
            margin-left: 10px;
            font-size: 10px;
        }

        #aa {
            color: #00a1d6;
            margin-left: 5px;
            font-size: 10px;
            text-decoration: none;
        }

        .btnreg {
            width: 190px;
            border: 1px solid #aaa;
        }

        .input6 input:first-child {
            background-color: #00A7DE;
        }

        .input6 input[type='button'] {
            width: 178px;
            height: 38px;
            margin: 0;
            padding: 0;
            outline: none;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 2px;
            color: #fff;
        }

        .input7 {
            margin-top: 15px;
        }

        .input7 a {
            padding-left: 28px;
            background: url(../img/index/wechat_qq.png) no-repeat;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin-right: 25px;
        }

        .input7 a:last-child {
            background-position: 0 -41px;
        }

        .input7 a {
            padding-left: 28px;
            background: url(../img/index/wechat_qq.png) no-repeat;
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin-right: 25px;
        }
    </style>
</head>
<body>
<header>
    <div class="container">
        <!--前-->
        <ul class="nav nav-pills navbar-nav" id="ul">
            <li class="span"><a href="new_file.html">
                <span class="iconfont icon-bilibilidonghua"></span>
            </a></li>
            <li><a href="#">主站</a></li>
            <li><a href="#">游戏中心</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">会员购</a></li>
            <li><a href="#">漫画</a></li>
            <li><a href="#">赛事</a></li>
            <li><a href="#">BML</a></li>
            <li><a href="#">
                <span id="span" class="glyphicon glyphicon-phone"></span>
                下载APP</a></li>

        </ul>

        <!-- 搜索框-->
        <form class="navbar-form  navbar-left" action="" method="post">
            <div class="form-group">
                <input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
            </div>
            <div class="form-group">
                <button id="button" class="btn btn-link" style="outline: none;border: none;">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </form>

        <!--后-->
        <div class="nav navbar-nav navbar-left" id="img">
            <a href="#">
                <img src="img/akari.jpg" style="height: 32px;"/>
            </a>
        </div>
        <ul class="nav navbar-nav navbar-left" id="ul">
            <li><a href="#">动态</a></li>
            <li><a href="#">历史</a></li>
            <li><a href="#">常做中心</a></li>
            <li id="li">
                <a href="#" id="a" style="color: white;">投稿</a>
            </li>
        </ul>
        <!---->
    </div>
</header>
<!---->
<div style="margin-top: -5px;">
    <div style="height: 90px;background: #00a0d8;">
        <div class="container">
            <img src="img/rl_top.35edfde.png"/>
        </div>
    </div>
    <div style="height:600px;background: white;">
        <!--登录页面-->
        <div class="container">
            <!--title-->
            <div class="row">
                <div id="title">
                    <span id="tit">登录</span>
                </div>
            </div>
            <!---->
            <!--下载手机App-->
            <div class="row">
                <div class="col-md-5">
                    <div id="imgage"></div>
                    <!--二维码-->
                    <div style="margin-top: 50px;margin-left: 215px;">
                        <img src="img/3.png"/>
                    </div>
                    <div style="margin-left: 218px;">
                        <img src="img/下载.png"/>
                    </div>
                    <!---->

                    <div style="margin-left: 42px;">
                        <img src="img/2233login.af9c53d.png"/>
                        <div class="text-center" style="margin-top: -123px;margin-left: 69px;">
                            <p style="font-size: 20px;">扫描二维码登录</p>
                            <p style="color: #717171;">请使用
                                <a href="#" style="font-size: 14px;text-decoration: none;">哔哩哔哩客户端</a>
                                <br/>
                                扫描登陆
                                <br/>
                                或扫描下载App
                            </p>
                        </div>
                    </div>
                </div>
                <!--中心線-->
                <div id="line"></div>
                <!---->
                <!--登陸表單-->
                <div class="col-md-6" id="div">
                    <div id="loginapp">
                        <!--输入框-->
                        <div class="form-group">
                            <input type="text" v-model="phone" autocomplete="off" placeholder="你的手机号/邮箱" maxlength="50"
                                   class="form-control sc2">
                            <p></p>
                        </div>
                        <!---->
                        <!--密码框-->
                        <div class="form-group" style="margin-top: 30px;">
                            <input type="password" v-model="password" id="" autocomplete="off" placeholder="密码" maxlength="16"
                                   class="form-control sc2">
                        </div>
                        <!---->
                        <!--勾选和忘记密码-->
                        <div class="row" style="margin-left: 6px;line-height: 80px;">
                            <input type="checkbox" value=""/>记住我
                            <span id="size">不是自己的电脑上不要勾选此项</span>
                            <span style="margin-left: 20px;"></span>
                            <a id="aa" href="#">无法验证?</a>
                            <a id="aa" href="blibli_loginphone.html">忘记密码?</a>
                        </div>
                        <!---->
                        <!--按钮-->
                        <div class="input6">
                            <input @click="login" type="button" value="登录" id="login">
                            <a class="btn btn-default" href="blibli_loginzhuce.html">注册</a>
                        </div>
                        <!---->
                        <div class="input7">
                            <a href="###">微博账号登录</a>
                            <a href="###">QQ账号登录</a>
                        </div>
                    </div>
                </div>
                <!---->
            </div>
            <!---->

        </div>
        <!---->
    </div>
</div>
<footer>
    <div class="foot_top clearfix">
        <div class="bilibili">
            <p>bilibili</p>
            <div class="about clearfix">
                <ul>
                    <li><a href="###">关于我们</a></li>
                    <li><a href="###">联系我们</a></li>
                </ul>
                <ul>
                    <li><a href="###">友情链接</a></li>
                    <li><a href="###">加入我们</a></li>
                </ul>
                <ul>
                    <li><a href="###">哔哩哔哩周边</a></li>
                    <li><a href="###">官方认证</a></li>
                </ul>
            </div>
        </div>
        <div class="fast_link">
            <p>传送门</p>
            <div class="about clearfix">
                <ul>
                    <li><a href="###">帮助中心</a></li>
                    <li><a href="###">侵权申诉</a></li>
                    <li><a href="###">用户反馈论坛</a></li>
                </ul>
                <ul>
                    <li><a href="###">高级弹幕</a></li>
                    <li><a href="###">分院帽计划</a></li>
                    <li><a href="###">壁纸站</a></li>
                </ul>
                <ul>
                    <li><a href="###">活动专题页</a></li>
                    <li><a href="###">活动中心</a></li>
                    <li><a href="###">名人堂</a></li>
                </ul>
            </div>
        </div>
        <div class="focus clearfix">
            <a href="###">
                <dl>
                    <dt class="focus_pic phone"></dt>
                    <dt class="code_pic phone_code"></dt>
                    <dd class="focus_pro">手机端下载</dd>
                </dl>
            </a>
            <a href="###">
                <dl>
                    <dt class="focus_pic sina"></dt>
                    <dt class="code_pic sina_code"></dt>
                    <dd class="focus_pro">新浪微博</dd>
                </dl>
            </a>
            <a href="###">
                <dl>
                    <dt class="focus_pic official"></dt>
                    <dt class="code_pic wechat_code"></dt>
                    <dd class="focus_pro">官方微信</dd>
                </dl>
            </a>
        </div>
    </div>
    <div class="foot_bottom clearfix">
        <div class="cooper"><img src="img/index/cooper.png" alt=""></div>
        <div class="foot_info">
            <p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 |
                互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com |
                违法不良信息举报电话：4000233233转3</p>
            <p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> | <a href="###">上海互联网举报中心</a> | <a href="###">12318
                全国文化市场举报网站</a></p>
        </div>
    </div>
</footer>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el:'#loginapp',
        data: {
            phone: "",
            password: "",
        },
        methods:{
            login:function () {
                alert("我来登入了");
                axios.get("/login", {
                    params: {
                        phone: this.phone,
                        password: this.password
                    }
                }).then(res => {
                    if (res.data.msg == null) {
                        alert("密码或手机号错误")
                    } else {
                        var user = res.data;
                        sessionStorage.setItem("user",JSON.stringify(user));
                        location.href = "/index.html"
                    }
                })
            }
        }
    });
</script>
